import React from 'react';
import { List } from 'antd-mobile';
import { API_HOST } from 'Constants/config';
import dialog from 'Utils/dialog';
import './index.scss';

const Item = List.Item;

class UploadAttachmentPage extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      uuid: this.props.location.query.uuid,
      src: '',
      type: '',
      progress: 0,
    }
  }
  selectFile() {
    const file = document.getElementById('upload-attach').files[0];
    const type = file.type.split('/')[0];
    const src = window.URL.createObjectURL(file);
    this.setState({
      type,
      src
    });
  }
  returnFile(type) {
    if (type === 'video') {
      return (
        <video
          id="video"
          src={this.state.src}
          controls="controls"
          ref={(ref) => {
            this.video = ref;
          }}
        >
        </video>
      )
    } else if (type === 'image') {
      return (
        <img src={this.state.src} alt="" />
      )
    }
    return ''
  }
  finished(e) {
    if (e.currentTarget.status === 200 && e.currentTarget.readyState === 4) {
      const buttons = [
        {
          label: '知道了',
          onClick: () => {},
        },
      ];
      dialog.open('提示', '上传成功', buttons, 'center');
      this.setState({
        src: '',
        type: ''
      })
    }
  }
  uploadProgress(evt) {
    const percentComplete = Math.round((evt.loaded * 100) / evt.total);
    this.setState({
      progress: percentComplete,
    });
  }
  upload() {
    const file = document.getElementById('upload-attach').files[0];
    const formData = new FormData();
    formData.append('upload_file', file, file.name);
    formData.append('uuid', this.state.uuid);
    formData.append('attachment_type', this.state.type);
    const xhr = new window.XMLHttpRequest();
    xhr.upload.addEventListener('progress', this.uploadProgress.bind(this), false);
    xhr.onreadystatechange = this.finished.bind(this);
    xhr.open('POST', `${API_HOST}/files/wechat`);
    xhr.send(formData)
  }
  render() {
    return (
      <div className="attach-page">
        <div className="title-logo">
          <div className="logo-img">
            <img src="./images/attach/icon_logo@2x.png" alt="logo" />
          </div>
          <div className="title-detial">全域食品安全社会共治食安桥</div>
        </div>
        <div className="step">
          <div className="step-title">操作步骤介绍：</div>
          <ul className="step-detail">
            <li>1、选择附件</li>
            <li>2、手机上点击“上传”</li>
            <li>3、大屏设备上点击“提交”</li>
          </ul>
        </div>
        <div className="select-file">
          <Item arrow="horizontal">
            选择附件
            <input type="file" accept="video/*, image/*" id="upload-attach" onChange={this.selectFile.bind(this)} />
          </Item>
          {
            this.state.type &&
            <div className="file-show">
              <div className="file-container">
                {
                  this.returnFile(this.state.type)
                }
              </div>
              {
                (this.state.progress !== 0 && this.state.progress !== 100) &&
                <div className="progress-container">
                  <div className="progress-inner" style={{ width: `${this.state.progress}%` }}></div>
                </div>
              }
            </div>
          }
        </div>
        <div className="prompt">
          温馨提示：重复上传的附件只保留最后一次上传的附件
        </div>
        <div className="operation">
          <button className="btn-upload" onClick={this.upload.bind(this)} disabled={!this.state.type}>上传</button>
        </div>
      </div>
    );
  }
}

export default UploadAttachmentPage;
